<route lang="json5" type="page">
{
	style: {
		navigationStyle: 'default',
		navigationBarBackgroundColor: '#FFFFFF',
		navigationBarTextStyle: 'black',
		backgroundColor: '#FFFFFF',
		navigationBarTitleText: '完善信息',
	},
}
</route>
<template>
	<view class="page-manage h-[100vh] box-border">
		<no-page v-if="thisPage === 0" @click="retry"></no-page>
		<view class="relative h-full box-border pb-[283rpx] box-border">
			<scroll-view scroll-y class="h-full">
				<view class="w-full px-8 pb-4 pt-[280rpx] box-border">
					<block v-if="list.length">
						<view
							v-for="(item, index) in list"
							:key="item.id"
							@tap="change(index)"
							class="w-full h-[167rpx] rounded-[83rpx] px-4 py-4 box-border flex justify-between items-center mb-4"
							:style="{ background: item.checked[0] ? '#E7F0FD' : '#F6F7F9' }"
						>
							<view class="flex justify-between items-center">
								<image
									class="w-[102rpx] h-[102rpx] rounded-[50%] border-1 border-solid border-[#fff] mr-1"
									:src="item.avatar || baseImg + '/user-default.png'"
								></image>
								<view class="flex flex-col pl-2 py-4">
									<text class="text-[#303030] text-[33rpx]">{{ item.username }}</text>
									<text class="text-[#5E5E5E] text-[24rpx] mt-2">{{ item.school_name }}</text>
								</view>
							</view>
							<uni-data-checkbox
								v-model="item.checked"
								v-if="item.checked[0]"
								multiple
								selectedColor="#6FA5F3"
								:localdata="range"
							></uni-data-checkbox>
						</view>
					</block>

					<view class="w-full flex flex-col justify-center items-center pb-8" v-else>
						<image :src="baseImg + '/class-login.png'" class="w-[352rpx] h-[317rpx]"></image>
						<text class="text-[#474747] text-[32rpx] mt-4">您还未加入班级哦~</text>
					</view>
					<view
						@tap="toPersonal"
						class="w-full h-[97rpx] rounded-[83rpx] text-[#303030] text-[32rpx] flex justify-center items-center"
						:style="{ background: '#F6F7F9' }"
					>
						<uni-icons type="plusempty" class="mr-1"></uni-icons> 添加教师
					</view>
				</view>
			</scroll-view>
			<view class="w-full h-[283rpx] absolute bottom-0 left-0">
				<view class="w-full h-full relative">
					<image
						class="w-[430rpx] h-[105rpx] absolute left-[50%] -translate-x-[50%] top-0 z-1"
						:src="baseImg + '/personal-success.png'"
					></image>
					<view
						@tap="confirm"
						class="w-[430rpx] h-[105rpx] flex justify-center items-center absolute text-[#F4F7F4] text-[40rpx] left-[50%] -translate-x-[50%] top-0 z-2"
						>确 定</view
					>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { getStudentList, setDefaultUserInfo, getDefaultUserInfo } from '@/service/user';
import { useUserStore } from '@/store';

const baseImg = ref(import.meta.env.VITE_STATIC_IMAGE);
const userStore = useUserStore();
const range = [{ text: '', value: true }];
const list = ref([]);
const linkType = ref('');
const thisPage = ref(-1);

const showAdd = computed(() => {
	return !!list.value.filter(item => item.checked[0]).length;
});

onShow(() => {
	getList();
});

onLoad(options => {
	if (options.type) {
		linkType.value = options.type;
	}
});

const getList = async () => {
	uni.showLoading({
		title: '加载中...',
	});
	try {
		const res = await getStudentList();
		uni.hideLoading();
		if (res.status_code === 200 && res.data) {
			list.value = res.data.map(item => {
				return {
					...item,
					checked: item.is_default === 1 ? [true] : [false],
				};
			});
			thisPage.value = 1;
		} else {
			thisPage.value = 0;
		}
	} catch (error) {
		uni.hideLoading();
		thisPage.value = 0;
	}
};

const retry = () => {
	getList();
};

const change = index => {
	list.value = list.value.map((item, windex) => {
		const obj = Object.assign(item);
		obj.checked = [false];
		if (windex === index) {
			obj.checked = [true];
		}
		return obj;
	});
};

const confirm = async () => {
	if (!showAdd) {
		uni.showToast({
			icon: 'none',
			title: '请选择默认账户',
		});
		return;
	}
	const obj = list.value.find(item => item.checked[0]);
	if (!obj) return;
	try {
		const res = await setDefaultUserInfo(obj.student_id);
		if (res.status_code === 200) {
			uni.showToast({
				icon: 'none',
				title: '设置成功',
				success: async () => {
					getList();
					const res = await getDefaultUserInfo();
					if (res.status_code === 200 && res.data) {
						userStore.setUserInfo({ ...userStore.userInfo, ...res.data });
					}
					if (linkType.value === 'back') {
						uni.navigateBack({ delta: 1 });
					}
				},
			});
		} else {
			uni.showToast({
				icon: 'none',
				title: res.message,
			});
		}
	} catch (error) {
		uni.showToast({
			icon: 'none',
			title: '服务器异常',
		});
	}
};

const toPersonal = () => {
	uni.navigateTo({
		url: '/pages-user/account/add/index',
	});
};
</script>
<script lang="ts">
export default {
	options: { styleIsolation: 'shared' },
};
</script>

<style lang="scss">
page {
	background: #fff;
}
</style>
<style lang="scss" scoped>
.page-manage {
	:deep(.uni-data-checklist .checklist-group .checklist-box) {
		margin: 0;

		.checkbox__inner {
			width: 38rpx !important;
			height: 38rpx !important;
			border-radius: 50% !important;

			.checkbox__inner-icon {
				top: 2px !important;
				left: 5px !important;
			}
		}
	}
}
</style>
